import moment from 'moment'
import classNames from 'classnames'
import avatar from '../assets/images/avatar.png'

const CommentList = ({ list, delComment, changeAttitude }) => {
  const fomartTime = (time) => {
    return moment(time).format('YYYY-MM-DD HH:mm:ss')
  }

  return (
    <div className="comment-list">
      {list.map((item) => (
        <div key={item.id} className="list-item">
          <div className="user-face">
            <img className="user-head" src={avatar} alt="" />
          </div>
          <div className="comment">
            <div className="user">{item.author}</div>
            <p className="text">{item.comment}</p>
            <div className="info">
              <span className="time">{fomartTime(item.time)}</span>
              {/* 赞 */}
              <span
                onClick={() =>
                  changeAttitude(item.id, item.attitude === 1 ? 0 : 1)
                }
                className={classNames('like', {
                  liked: item.attitude === 1,
                })}
              >
                <i className="icon" />
              </span>
              {/* 踩 */}
              <span
                onClick={() =>
                  changeAttitude(item.id, item.attitude === -1 ? 0 : -1)
                }
                className={classNames('hate', {
                  hated: item.attitude === -1,
                })}
              >
                <i className="icon" />
              </span>
              <span
                onClick={() => delComment(item.id)}
                className="reply btn-hover"
              >
                删除
              </span>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

export default CommentList
